<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/font/iconfont.css" />
    <link rel="stylesheet" href="./css/index2.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/logon2.css" />
  </head>
  <body>
    <!-- 头部 start-->
    <header id="top">
      <div class="header_top">
        <div class="header_topbar fr">
          <div class="topbar_login">
            <p class="p1">
              <a href="./logon2.html">登录</a>&nbsp;或&nbsp;<a
                href="./regj2.html"
                >注册</a
              >&nbsp;ANTA会员
            </p>
            <p class="p2" style="display: none">
              <a href="javascript:;">欢迎：<span></span></a>
            </p>
          </div>
          <div class="topbar_cart">
            <a href="./cart2.html" class="iconfont icon-gouwuchefill"></a>
          </div>
          <div class="topbar_service">
            <a href="javascript:;" class="iconfont icon-custom-service"></a>
          </div>
          <div class="topbar_en">
            <a href="javascript:;">EN</a>
          </div>
        </div>
      </div>
      <div class="header_bottom">
        <div class="header_logo fl">
          <a href="./index2.html">
            <img src="./img/logo-anta.svg" alt="" width="" />
          </a>
        </div>
        <ul class="header_nav fr">
          <li class="nav_item">
            <a href="./list2.html">冬奥国旗款</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">男子</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">运动鞋</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">篮球鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">户外综训鞋</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服装</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">外套夹克</a></li>
                  <li><a href="javascript:;">羽绒服/马甲</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <li><a href="javascript:;">运动裤</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有配件</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <li><a href="javascript:;">运动袜子</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">运动项目</a></li>
                  <li><a href="javascript:;">跑步</a></li>
                  <li><a href="javascript:;">篮球</a></li>
                  <li><a href="javascript:;">综训</a></li>
                  <li><a href="javascript:;">生活</a></li>
                  <li><a href="javascript:;">健身</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">女子</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">棉鞋</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服装</a></li>
                  <li><a href="javascript:;">羽绒服</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">羽绒服/马甲</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">运动短裤</a></li>
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">所有配件</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <li><a href="javascript:;">运动袜类</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">儿童</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">新品上市</a></li>
                  <li><a href="javascript:;">男中大童</a></li>
                  <li><a href="javascript:;">女中大童</a></li>
                  <li><a href="javascript:;">男小童</a></li>
                  <li><a href="javascript:;">女小童</a></li>
                  <li><a href="javascript:;">婴童</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">篮球鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">足球鞋</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服饰</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">羽绒服</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">运动短裤</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">所有配饰</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">安踏儿童</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">品牌文化</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">观赏视频</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">联系我们</a>
          </li>
          <li class="nav_item last_li">
            <div class="nav_search">
              <a
                href="javascript:;"
                class="nav_search_btn iconfont icon-xiangshang"
              ></a>
              <input type="text" class="nav_search_ipt" placeholder="搜索" />
            </div>
          </li>
        </ul>
      </div>
    </header>
    <!-- 头部 end-->
    <!-- 主体 -->
    <main>
      <div class="wrapper">
        <div class="wrap">
          <div class="layout">
            <div class="mian_box">
              <div class="username_login_box">
                <div class="login_area">
                  <div class="login_tabs">
                    <h6 class="active h6_btn1">账号密码登录</h6>
                    <h6 class="h6_btn2">短信快捷登录</h6>
                  </div>
                  <form>
                    <div class="account_number">
                      <div class="login_user">
                        <input
                          type="text"
                          name="username"
                          placeholder="邮箱/手机号码/用户名"
                          id="user"
                        />
                      </div>
                      <div class="login_user">
                        <input
                          type="password"
                          name="userpass"
                          placeholder="密码"
                          id="pass"
                        />
                      </div>
                      <div class="btns_bg">
                        <input
                          type="button"
                          value="立即登录"
                          class="btnadpt"
                          id="btn"
                        />
                      </div>
                    </div>
                    <div style="display: none" class="mobile_phone">
                      <div class="login_user">
                        <input
                          type="text"
                          name="username"
                          placeholder="手机号码"
                        />
                      </div>
                      <div class="lgncode">
                        <div class="code_label">
                          <input
                            type="text"
                            class="code"
                            placeholder="请输入图片验证码"
                          />
                        </div>
                        <img
                          src="https://www.anta.cn/api.php?s=antacom/passport/code.html&w=120&h=36&1647277541145"
                          alt=""
                        />
                      </div>
                      <div class="labelbox-smscode">
                        <input
                          type="text"
                          placeholder="短信验证码"
                          class="short_message"
                        />
                        <span>获取验证码</span>
                      </div>
                      <div class="btns_bg">
                        <input type="submit" value="立即登录" class="btnadpt" />
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="other_login">
                <fieldset>
                  <legend>其他方式登录</legend>
                </fieldset>
                <div class="wenxin_login">
                  <a href="javascript:;" class="btn_weixin"></a>
                </div>
              </div>
              <div class="register_forget">
                <a href="javascript:;">账号注册</a>
                <span>|</span>
                <a href="javascript:;">忘记密码</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 主体 -->
    <!-- 脚部 start -->
    <footer>
      <div class="footer_inner">
        <div class="footer_left fl">
          <img src="./img/footer-anta.svg" alt="" />
        </div>
        <div class="footer_right fr">
          <ul class="links_line">
            <li style="border-left: 0">
              <a href="javascript:;">安踏海外</a>
            </li>
            <li>
              <a href="javascript:;">安踏投资者关系</a>
            </li>
          </ul>
          <div class="footer_copyright">
            <div style="margin-bottom: 6px">
              <span>Copyright(C) 2020 by www.ANTA.com</span>
              <span>©安踏体育用品有限公司版权所有</span>
              <a href="javascript:;">营业执照</a>
              <a href="javascript:;">开户许可证</a>
            </div>
            <div>
              <a href="javascript:;">闽ICP备11020421号-1</a>
              <a href="javascript:;">闽公网安备35058202000423号</a>
            </div>
          </div>
          <ul class="links_line">
            <li style="border-left: 0"><a href="javascript:;">安踏儿童</a></li>
            <li><a href="javascript:;">Fila</a></li>
            <li><a href="javascript:;">Kolon Sport</a></li>
            <li><a href="javascript:;">Descente</a></li>
            <li><a href="javascript:;">Sprandi</a></li>
            <li><a href="javascript:;">Kingkow</a></li>
          </ul>
        </div>
      </div>
    </footer>
    <!-- 脚部 end -->
  </body>
</html>
<script src="./node_modules/_jquery@3.6.0@jquery/dist/jquery.min.js"></script>
<script src="./js/anta.js"></script>
<script src="./js/cookietool.js"></script>
<script>
  // 二级菜单
  $(".nav_item")
    .mouseover(function () {
      $(this).find(".menu_two").show();
    })
    .mouseout(function () {
      $(this).find(".menu_two").hide();
    });

  // 登录页选项卡

  $(".login_tabs").on("click", "h6", function () {
    $(".login_tabs>h6").removeClass("active");
    $(this).addClass("active");
  });

  $(".h6_btn1").on("click", function () {
    // $(this).addClass('active')
    $(".account_number").css("display", "block");
    $(".mobile_phone").css("display", "none");
  });
  $(".h6_btn2").on("click", function () {
    // $(this).addClass('active')
    $(".account_number").css("display", "none");
    $(".mobile_phone").css("display", "block");
  });
   

//   登录接口
  let btn = document.querySelector("#btn");
  let user = document.querySelector("#user");
  let pass = document.querySelector("#pass");
  btn.onclick = function () {
    $.ajax({
      type: "POST",
      url: "./goodsAndShoppingCart/login.php",
      data: `username=${user.value}&userpass=${pass.value}`,
      success: function (data) {
        if (data.trim() == "success") {
          document.cookie = "username=" + user.value;
          location.href = "index2.html";
        } else if (data.trim() == "fail") {
          alert("用户名或密码错误");
        }
      },
    });
  };
</script>
